<template>
  <div>AppContent</div>
  <button @click="changeTitle">修改title</button>
  <!--1.计数器-->
  <hr/>
  <home></home>
  <hr/>
  <about></about>
  <!--2.home和about页面切换-->
  <button @click="currentPage='home'">home</button>
  <button @click="currentPage='about'">about</button>
  <component :is="currentPage"></component>
</template>

<script>
  import Home from "./views/Home.vue"
  import About from "./views/About.vue"
  import useTitle from "./hooks/useTitle.js"
  import {ref} from "vue";
  export default {
    components:{
      Home,
      About
    },
    setup(){
      const currentPage=ref("home")
      function changeTitle(){
        useTitle("app title")
      }
      return {
        changeTitle,
        currentPage
      }
    }
  }
</script>

<style scoped>

</style>